<template>
  <div id="luggage-info-list" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item ms-1" aria-current="page">基础数据</li>
        <li class="breadcrumb-item" aria-current="page">
          <router-link to="/h5/data/luggages">行李信息</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
          <template v-if="id === 0"> 新建 </template>
          <template v-else> 修改 </template>
        </li>

        <span class="ms-auto me-1" @click.stop="back()">返回</span>
      </ol>
    </nav>
    <div class="card-body">
      <dl class="row">
        <dt class="col-4 text-end">航司</dt>
        <dd class="col-8">
          <input
            type="text"
            class="form-control"
            　v-model="carrier"
            size="3"
          />
        </dd>
        <dt class="col-4 text-end">行李类型</dt>
        <dd class="col-8">
          <select class="form-select" v-model.number="luggageType">
            <option value="0">托运</option>
            <option value="1">非托运</option>
          </select>
        </dd>
        <dt class="col-4 text-end">舱位等级</dt>
        <dd class="col-8">
          <select class="form-select" v-model.number="cabinType">
            <option value="10">头等舱</option>
            <option value="20">商务舱</option>
            <option value="30">经济舱</option>
            <option value="40">超级经济舱</option>
          </select>
        </dd>
        <dt class="col-4 text-end">标题</dt>
        <dd class="col-8">
          <input type="text" class="form-control" v-model.trim="title" />
        </dd>
        <dt class="col-4 text-end">免费行李额</dt>
        <dd class="col-8">
          <input type="text" class="form-control" v-model.trim="freeLimit" />
        </dd>
        <dt class="col-4 text-end">体积限定(件)</dt>
        <dd class="col-8">
          <input type="text" class="form-control" v-model.trim="volumeLimit" />
        </dd>
        <dt class="col-4 text-end">重量限定(件)</dt>
        <dd class="col-8">
          <input type="text" class="form-control" v-model.trim="weightLimit" />
        </dd>
        <dt class="col-4 text-end">备注</dt>
        <dd class="col-8">
          <input type="text" class="form-control" v-model.trim="remark" />
        </dd>
        <dt class="col-4 text-end"></dt>
        <dd class="col-8">
          <div class="form-check" v-if="id === 0">
            <input
              type="checkbox"
              class="form-check-input"
              v-model="keepInputing"
            />
            <label class="form-check-label">继续录入</label>
          </div>
        </dd>
      </dl>
    </div>
    <div class="card-footer text-center">
      <button
        type="button"
        class="btn btn-primary"
        v-on:click="saveLuggageInfo()"
      >
        保存
      </button>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { getLuggage, saveLuggageInfo } from "@/api/basic-data.js";

export default {
  data() {
    return {
      id: 0,
      opMode: 0, //0-默认操作，1-复制(id设置为0，其它保留)
      carrier: "",

      luggageType: 0,
      cabinType: 30,
      freeLimit: "",
      volumeLimit: "",
      weightLimit: "",
      remark: "",
      title: "",

      keepInputing: false,
    };
  },
  computed: {
    isDataAdmin() {
      return this.$store.getters.isDataAdmin;
    },
  },
  mounted: function () {
    const opMode = parseInt(this.$route.query.mode);
    if (!isNaN(opMode)) {
      this.opMode = opMode;
    }

    const carrier = this.$route.query.carrier;
    if (carrier !== undefined) {
      this.carrier = carrier;
    }

    const id = parseInt(this.$route.query.id);
    if (!isNaN(id)) {
      this.id = parseInt(this.$route.query.id);
      this.searchDetail();
    }
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    searchDetail: function () {
      getLuggage(this.id, (v) => {
        this.id = v.id;
        this.carrier = v.carrier;
        this.cabinType = v.cabinType;
        this.luggageType = v.luggageType;
        this.title = v.title;
        this.freeLimit = v.freeLimit;
        this.volumeLimit = v.volumeLimit;
        this.weightLimit = v.weightLimit;
        this.remark = v.remark;

        if (this.opMode === 1) {
          //复制
          this.id = 0;
        }
      });
    },
    saveLuggageInfo: function () {
      const params = {
        id: this.id,
        carrier: this.carrier,
        cabinType: this.cabinType,
        luggageType: this.luggageType,
        title: this.title,
        freeLimit: this.freeLimit,
        volumeLimit: this.volumeLimit,
        weightLimit: this.weightLimit,
        remark: this.remark,
      };

      saveLuggageInfo(params, (v) => {
        if (v.status === "OK") {
          this.showErrMsg("保存成功");
          if (this.keepInputing === false) {
            this.$router.replace("/h5/data/luggage/" + v.returnCode);
          }
        } else {
          this.showErrMsg("保存失败: " + v.errmsg, "danger");
        }
      });
    },
  },
};
</script>
